/** 
首页公共的css动画
*/
@keyframes fade {
    from {
        opacity: .3;
    }

    to {
        opacity: 1;
    }
}

/* 多边形旋转 */
@keyframes shapRound {
    0% {
        opacity  : 0;
        transform: scale(0) rotate(0deg);
    }

    3% {
        opacity  : 1;
        transform: scale(1) rotate(480deg);
    }

    90% {
        opacity      : 0.8;
        transform    : scale(1.5) rotate(1000deg);
        border-radius: 0px;
        border-width : 1px;
    }

    100% {
        opacity      : 0;
        border-radius: 1000px;
        border-width : 5px;
        transform    : scale(6) rotate(2100deg);
    }
}

/* 多边形旋转2 */
@keyframes shapRound1 {
    0% {
        opacity  : 0;
        transform: scale(0) rotate(0deg);
    }

    6% {
        opacity  : 1;
        transform: scale(1) rotate(-480deg);
    }

    90% {
        opacity      : 0.8;
        transform    : scale(1.5) rotate(-1300deg);
        border-radius: 0px;
        border-width : 1px;
    }

    100% {
        opacity      : 0;
        border-radius: 1000px;
        border-width : 5px;
        transform    : scale(6) rotate(-2100deg);
    }
}

@keyframes SwordFromLeft {

    0% {
        transform: translateX(-1200px) rotate(-20deg) translateY(200px);
    }

    50% {
        transform: translateX(-900px);
    }

    100% {
        transform: translateX(0px);
    }
}

.nav {
    .logo {
        transition: all 0.2s;
        cursor    : pointer;

        &:hover {
            transform: scale(1.1);
        }
    }

    .content {
        a {
            transition   : all 0.2s;
            position     : relative;
            // outline   : solid red 1px;

            .shapeHover {
                @large     : 50px;
                width      : @large;
                height     : @large;
                position   : absolute;
                left       : 50%;
                top        : 50%;
                margin-left: -25px;
                margin-top : -25px;
                border     : solid 1px goldenrod;
                opacity    : 0;
            }

            .shapeHover1 {
                @large     : 40px;
                width      : @large;
                height     : @large;
                position   : absolute;
                left       : 50%;
                top        : 50%;
                margin-left: -20px;
                margin-top : -20px;
                border     : solid 1px yellow;
                opacity    : 0;
            }

            &:hover {
                transform: rotate(30deg);

                .shapeHover {
                    animation: shapRound 10s;
                }

                .shapeHover1 {
                    animation: shapRound1 10s;
                }
            }
        }
    }
}

.banner {
    .item {
        .bg {
            animation                : SwordFromLeft 1.5s;
            animation-iteration-count: 1;
            transition               : all 0.2s;
            z-index                  : 10;

            &:hover {
                transform: translateX(10px);
            }
        }

        .btn {
            cursor    : pointer;
            transition: all 0.2s;
            z-index   : 11;


            &:hover {
                transform: translateX(10px);
            }
        }
    }

    .dotList {
        display: none;
    }
}

.main {
    .intro {
        .left {
            position: relative;

            button {
                transition: all 0.2s;

                &:hover {
                    transform: scale(1.1);
                }
            }
        }

        .right {

            // .rightBtn,
            // .leftBtn {}
            @keyframes aaa {
                0% {
                    opacity  : 0.7;
                    transform: translateX(500px);
                }

                100% {
                    opacity  : 1;
                    transform: translateX(0px);
                }
            }

            #swipperImg {
                animation: aaa 1s;
            }
        }
    }

    .information {
        .mid {
            .titleArea {

                .titleIcon,
                .title {
                    transition: all 0.5s;
                }
            }

            .moreBtn {
                transition: all 0.3s;
            }

            &:hover {
                .left-icon {
                    transform: translateX(-30px) rotate(45deg);
                }

                .right-icon {
                    transform: translateX(30px) rotateY(180deg) rotate(45deg);
                }

                .title {
                    letter-spacing: .3em;
                    text-shadow   : 0px 0px 5px rgb(228, 228, 151);
                }
            }

            .moreBtn {
                cursor: pointer;

                &:hover {
                    transform: translateY(-20px);
                }
            }
        }
    }

    .forum {
        .left {

            .hotFirstBtn,
            .timeFirstBtn {
                z-index: 300;
            }

            // 这里写两个上下的按钮
            .upBtn,
            .downBtn {
                position: absolute;
                right   : 4rem;
                bottom  : 10rem;
                z-index : 300;
                opacity : 1;
                cursor  : pointer;
            }

            .upBtn {
                bottom   : 16rem;
                transform: rotateX(180deg);
            }
        }

        .btn {
            cursor    : pointer;
            transition: all 0.3s;

            &:hover {
                transform: translateX(-5px);
            }
        }

        .right {
            .item {

                .show,
                .textArea {
                    transition: all 0.3s;
                }

                &:hover {
                    .show {
                        transform   : translateX(-40px);
                        // z-index  : 100;
                    }

                    .textArea {
                        transform: translateX(20px);
                    }
                }

                .more {
                    transition: all 0.3s;
                    cursor    : pointer;

                    &:hover {
                        transform: translateY(-10px);
                    }
                }
            }
        }
    }
}

.footer {
    a {
        transition: all 0.2s;

        &:hover {
            margin-top: 5px;
            color     : red;
        }
    }
}